import React, { Component, } from 'react';
import { StyleSheet, Text, TextInput, View, } from 'react-native';
import HomeSelector from '../../app/selectors/home';
import * as HomeActions from '../../app/actions/home';
import connect from '../../app/store/connect';
import urls from '../../app/constants/urls';
import { GET, POST, } from '../../commons/utils/request';
import Toast from '../../components/Toast';
import TopCard from '../../components/TopCard/TopCard';
import { saveUserId, getUserId, } from '../../commons/utils/passport';

const colors = {
  bluecolor: {
    color: '#0091ff',
  },
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  content: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  phone: {
    width: 320,
    height: 40,
    marginTop: 50,
    borderColor: '#F0F0F0',
    borderWidth: 0.6,
    borderRadius: 4,
    paddingLeft: 10,
  },
  verifyCode: {
    width: 200,
    height: 40,
    marginTop: 20,
    borderColor: '#F0F0F0',
    borderWidth: 0.6,
    borderRadius: 4,
    paddingLeft: 10,
  },
  verifyCodeBtn: {
    width: 110,
    marginLeft: 10,
    marginTop: 20,
    alignContent: 'center',
    alignSelf: 'center',
    textAlign: 'center',
    paddingTop: 5,
    paddingBottom: 5,
    borderRadius: 6,
    borderColor: colors.bluecolor.color,
    borderWidth: 1,
    color: colors.bluecolor.color,
    paddingTop: 10,
    paddingBottom: 10,
  },
  verifyCodeContainer: {
    flexDirection: 'row',
    textDecorationStyle: 'solid',
    textDecorationLine: 'underline',
    lineHeight: 1,
    textDecorationColor: colors.bluecolor.color,
  },
  next: {
    width: 320,
    marginTop: 60,
    borderRadius: 5,
    color: '#FFFFFF',
    fontSize: 16,
    textAlign: 'center',
    textAlignVertical: 'center',
    backgroundColor: '#0091ff',
    paddingTop: 10,
    paddingBottom: 10,
  },
});

@connect(HomeSelector, HomeActions)
export default class Reg extends Component {
  static navigationOptions = {
    headerTitle: '注册',
  };

  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      code: '',
      userId: 0,
    };
  }

  // 获取验证码
  async sendCode(phone) {
    if (!phone || phone.length != 11) {
      Toast.show({ title: "请输入正确的手机号", });
      return;
    }
    await GET(urls.getCheckCode, { mainKey: phone, }).then(resp => {
      if (resp && resp.code === 0) {
        Toast.show({ title: "验证码发送成功", });
      } else {
        Toast.show({ title: "验证码发送失败," + resp.msg, });
      }
    });
  }

  // 校验验证码
  async regCheck(code, phone) {
    if (!phone || phone.length != 11) {
      Toast.show({ title: "请输入正确的手机号", });
      return;
    }
    if (!code || code.length != 6) {
      Toast.show({ title: "验证码长度不正确", });
      return;
    }
    const param = {
      checkCode: code,
      userName: phone,
      type: 'mobile',
    };
    console.log('TAGGG', `verifyCode====param==${JSON.stringify(param)}`);
    await POST(urls.regCheck, JSON.stringify(param)).then(async resp => {
      console.log('TAGGG', `verifyCode====resp==${JSON.stringify(resp)}`);
      if (resp && resp.code === 0 && resp.data && resp.data.userId) {
        const userId = resp.data.userId;
        console.log('TAGGG', `verifyCode====saveUserId===sss==${userId}`);
        saveUserId(userId);
        const _userId = await getUserId();
        console.log('TAGGG', `verifyCode====saveUserId==${_userId}`);
        const param = {
          userId,
          checkCode: code,
        };
        this.props.navigation.navigate('VerifyPwd', param);
      } else {
        Toast.show({ title: "校验失败, " + resp.msg, });
      }
    });
  }

  render() {
    const data = { title: '嗨, 欢迎注册', desc: 'Payment 服务期待您注册使用', icon: 'http://120.48.109.211:8088/static/icon/money.png', };
    return (
      <View style={styles.root}>
        <TopCard dataSource={data} />
        <View style={styles.content}>
          <TextInput
            style={styles.phone}
            placeholder="请输入手机号"
            placeholderTextColor="#999999"
            keyboardType="phone-pad"
            onChangeText={(phone) => this.setState({ phone, })}
          />

          <View style={styles.verifyCodeContainer}>
            <TextInput
              style={styles.verifyCode}
              placeholder="请输入验证码"
              placeholderTextColor="#999999"
              keyboardType="number-pad"
              onChangeText={(code) => this.setState({ code, })}
            />
            <Text
              style={styles.verifyCodeBtn}
              onPress={() => {
                this.sendCode(this.state.phone);
              }}
            >获取验证码</Text>
          </View>
          <Text
            style={styles.next}
            onPress={() => {
              this.regCheck(this.state.code, this.state.phone);
            }}
          >下一步</Text>
        </View>
      </View>
    );
  }
}
